<template>
    <div class="PriceTrend">
        <div class="container" ref="priceTrend" id="priceTrend"></div>
    </div>
</template>

<script lang="ts">
    import {Component, Vue} from 'vue-property-decorator'
    // @ts-ignore
    import ECharts from 'echarts'

    @Component({
        name: 'PriceTrend'
    })
    export default class extends Vue {
        private priceTrend: any;
        private mounted(): void {
            // @ts-ignore
            this.priceTrend = ECharts.init(document.getElementById('priceTrend'));
            this.priceTrend.setOption({
                grid: {
                    top: 30,
                    left: 50,
                    bottom: 40,
                    right: 20
                },
                xAxis: {
                    type: 'category',
                    data: ['2016-01-01', '2017-01-01', '2018-01-01','2016-01-01', '2017-01-01', '2018-01-01','2016-01-01', '2017-01-01', '2018-01-01','2016-01-01', '2017-01-01', '2018-01-01','2016-01-01', '2017-01-01', '2018-01-01','2016-01-01', '2017-01-01', '2018-01-01','2016-01-01', '2017-01-01', '2018-01-01','2016-01-01', '2017-01-01', '2018-01-01','2016-01-01', '2017-01-01', '2018-01-01','2016-01-01', '2017-01-01', '2018-01-01','2016-01-01', '2017-01-01', '2018-01-01','2016-01-01', '2017-01-01', '2018-01-01'],
                    axisLine: {
                        lineStyle: {
                            color: '#BFBFBF'
                        }
                    },
                    axisTick: {
                        alignWithLabel: true,
                    },
                    axisLabel: {
                        fontSize: 10
                    }
                },
                yAxis: {
                    // show: false,
                    type: 'value',
                    axisLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            type: 'dotted'
                        }
                    }
                },
                series: [{
                    data: [1, 2, 3, 1, 2 ,4, 5, 6, 2, 4, 8, 10, 10, 15, 10, 20, 21, 22, 23, 20, 30, 40, 30, 32, 33, 60, 100, 42, 46, 43, 42, 43, 42, 40],
                    type: 'line',
                    symbol: 'none',
                    lineStyle: {
                        width: 1
                    }
                }],
                color: '#1890FF'
            });
        }
    }
</script>

<style scoped lang="less">
    .PriceTrend {
        background-color: white;
        border-radius: 0.1rem;
        .container {
            height: 3.95rem;
        }
    }
</style>
